import { getConfig } from '@/config/api';

const config = getConfig();

export const cyber = {
  version: 8,
  sprite: `${config.mapboxAssets}/style/sprite`,
  glyphs: `${config.mapboxAssets}/glyphs/mapbox/{fontstack}/{range}.pbf`,
  name: 'CyberMap',
  sources: {
    openmaptiles: {
      type: 'vector',
      scheme: 'tms',
      tiles: [
        `${config.geoServer}/gwc/service/tms/1.0.0/dz:planetchina@EPSG:3857@pbf/{z}/{x}/{y}.pbf`,
      ],
    },
    gzsBuildings: {
      //包含guangdong和building 数据
      type: 'vector',
      scheme: 'tms',
      tiles: [
        `${config.geoServer}/gwc/service/tms/1.0.0/dz:gzbuildings@EPSG:3857@pbf/{z}/{x}/{y}.pbf`,
      ],
    },
    dem: {
      type: 'raster-dem',
      tiles: [
        `${config.geoServer}/gwc/service/wmts?layer=dz:guangdong_3857_RGB&style=&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}`,
      ],
      tileSize: 256,
      maxzoom: 14,
      volatile: true,
      bounds: [
        109.65069444444444, 20.214208386826517, 117.31368314409761,
        25.519861111111112,
      ],
    },
  },
  metadata: {
    'mapbox:autocomposite': false,
    'mapbox:groups': {
      '101da9f13b64a08fa4b6ac1168e89e5f': { collapsed: true, name: 'Places' },
      a14c9607bc7954ba1df7205bf660433f: {
        collapsed: true,
        name: 'Boundaries',
      },
      b6371a3f2f5a9932464fa3867530a2e5: {
        collapsed: true,
        name: 'Transportation',
      },
    },
    'mapbox:type': 'template',
    'openmaptiles:version': '3.x',
    'maputnik:renderer': 'mlgljs',
  },
  fog: {
    range: [1, 10],
    color: [
      'interpolate',
      ['exponential', 1.2],
      ['zoom'],
      5.5,
      'hsla(220, 15%, 35%, 1)', // 深蓝色
      6,
      'hsla(210, 40%, 55%, 0.75)', // 冷灰蓝色
    ],
    'high-color': 'hsla(200, 40%, 75%, 0.5)', // 明亮的灰蓝色
    'space-color': 'hsla(0, 0%, 0%, 0)', // 透明
    'horizon-blend': 0.2,
    'star-intensity': 0.3,
  },
  terrain: {
    source: 'dem', // 数据源 ID
    exaggeration: 1.5, // 地形高度的夸张比例
  },
  layers: [
    {
      //1个
      id: 'background',
      type: 'background',
      paint: { 'background-color': '#001f3d' },
    },
    {
      //1个
      id: 'water',
      type: 'fill',
      source: 'openmaptiles',
      'source-layer': 'water',
      filter: ['==', '$type', 'Polygon'],
      layout: { visibility: 'visible' },
      paint: { 'fill-antialias': false, 'fill-color': '#003366' },
    },
    {
      //1个
      id: 'waterway',
      type: 'line',
      source: 'openmaptiles',
      'source-layer': 'waterway',
      minzoom: 12,
      filter: ['==', '$type', 'LineString'],
      layout: { visibility: 'visible' },
      paint: { 'line-color': 'hsla(210, 100%, 70%,0.6)', 'line-opacity': 0.4 },
    },
    {
      //1个
      id: 'water_name',
      type: 'symbol',
      source: 'openmaptiles',
      'source-layer': 'water_name',
      filter: ['==', '$type', 'LineString'],
      layout: {
        'symbol-placement': 'line',
        'symbol-spacing': 500,
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-rotation-alignment': 'map',
        'text-size': 12,
        visibility: 'visible',
      },
      paint: {
        'text-color': 'hsl(200, 61%, 33%)',
        'text-halo-blur': 0,
        'text-halo-color': 'hsl(210, 12%, 50%)',
        'text-halo-width': 1,
      },
    },
    {
      //1个
      id: 'landcover_ice_shelf',
      type: 'fill',
      source: 'openmaptiles',
      'source-layer': 'landcover',
      maxzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'Polygon'],
        ['==', 'subclass', 'ice_shelf'],
      ],
      layout: { visibility: 'visible' },
      paint: { 'fill-color': 'hsl(210, 100%, 85%)', 'fill-opacity': 0.4 },
    },
    {
      //1个
      id: 'landuse_residential',
      type: 'fill',
      source: 'openmaptiles',
      'source-layer': 'landuse',
      maxzoom: 16,
      minzoom: 10,
      filter: [
        'all',
        ['==', '$type', 'Polygon'],
        ['==', 'subclass', 'residential'],
      ],
      layout: { visibility: 'visible' },
      paint: {
        'fill-color': 'hsla(45, 74%, 80%, 1)',
        'fill-opacity': {
          base: 0.6,
          stops: [
            [8, 0.8],
            [9, 0.6],
          ],
        },
      },
    },
    {
      //2个
      id: 'park',
      type: 'fill',
      source: 'openmaptiles',
      'source-layer': 'park',
      minzoom: 8,
      filter: ['==', '$type', 'Polygon'],
      layout: { visibility: 'visible' },
      paint: { 'fill-color': '#2A5D6C', 'fill-opacity': 0.4 },
    },
    {
      id: 'park_outline',
      type: 'line',
      source: 'openmaptiles',
      'source-layer': 'park',
      minzoom: 14,
      filter: ['==', '$type', 'Polygon'],
      layout: {},
      paint: { 'line-color': 'hsl(120, 40%, 40%)', 'line-dasharray': [2, 2] },
    },
    {
      //4个
      id: 'aeroway-taxiway',
      type: 'line',
      metadata: { 'mapbox:group': '1444849345966.4436' },
      source: 'openmaptiles',
      'source-layer': 'aeroway',
      minzoom: 12,
      filter: ['all', ['in', 'class', 'taxiway']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 53%)',
        'line-opacity': 1,
        'line-width': {
          base: 1.55,
          stops: [
            [13, 1.8],
            [20, 20],
          ],
        },
      },
    },
    {
      id: 'aeroway-runway-casing',
      type: 'line',
      metadata: { 'mapbox:group': '1444849345966.4436' },
      source: 'openmaptiles',
      'source-layer': 'aeroway',
      minzoom: 11,
      filter: ['all', ['in', 'class', 'runway']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 20%)',
        'line-opacity': 1,
        'line-width': {
          base: 1.5,
          stops: [
            [11, 6],
            [17, 55],
          ],
        },
      },
    },
    {
      id: 'aeroway-area',
      type: 'fill',
      metadata: { 'mapbox:group': '1444849345966.4436' },
      source: 'openmaptiles',
      'source-layer': 'aeroway',
      minzoom: 12,
      filter: [
        'all',
        ['==', '$type', 'Polygon'],
        ['in', 'class', 'runway', 'taxiway'],
      ],
      layout: { visibility: 'visible' },
      paint: { 'fill-color': 'hsl(0, 0%, 86%)', 'fill-opacity': 1 },
    },
    {
      id: 'aeroway-runway',
      type: 'line',
      metadata: { 'mapbox:group': '1444849345966.4436' },
      source: 'openmaptiles',
      'source-layer': 'aeroway',
      minzoom: 11,
      maxzoom: 24,
      filter: ['all', ['in', 'class', 'runway'], ['==', '$type', 'LineString']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 40%)',
        'line-opacity': 1,
        'line-width': {
          base: 1.5,
          stops: [
            [11, 4],
            [17, 50],
          ],
        },
      },
    },
    {
      //18个
      id: 'tunnel_motorway_casing',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 12,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
      ],
      layout: {
        'line-cap': 'butt',
        'line-join': 'miter',
        visibility: 'visible',
      },
      paint: {
        'line-color': '#333333',
        'line-opacity': 1,
        'line-width': {
          base: 1.4,
          stops: [
            [5.8, 0],
            [6, 3],
            [20, 40],
          ],
        },
      },
    },
    {
      id: 'tunnel_motorway_inner',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 12,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 16%)',
        'line-width': {
          base: 1.4,
          stops: [
            [4, 2],
            [6, 1.3],
            [20, 30],
          ],
        },
      },
    },
    {
      id: 'road_area_pier',
      type: 'fill',
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 12,
      filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'pier']],
      layout: { visibility: 'visible' },
      paint: { 'fill-antialias': true, 'fill-color': '#808080' },
    },
    {
      id: 'road_pier',
      type: 'line',
      metadata: {},
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 12,
      filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'pier']],
      layout: { 'line-cap': 'round', 'line-join': 'round' },
      paint: {
        'line-color': '#4b4b4b',
        'line-width': {
          base: 1.2,
          stops: [
            [15, 1],
            [17, 4],
          ],
        },
      },
    },
    {
      id: 'highway_path',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 14,
      filter: ['all', ['==', '$type', 'LineString'], ['==', 'class', 'path']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 33%)',
        'line-dasharray': [2, 2],
        'line-opacity': 1,
        'line-width': {
          base: 1.2,
          stops: [
            [12, 0.5],
            [20, 4],
          ],
        },
      },
    },
    {
      id: 'highway_minor',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      maxzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['in', 'class', 'minor', 'service', 'track'],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsl(0, 0%, 50%)',
        'line-opacity': 0.9,
        'line-width': {
          base: 1.55,
          stops: [
            [13, 1.8],
            [20, 20],
          ],
        },
      },
    },
    {
      id: 'highway_major_casing',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 14,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['in', 'class', 'primary', 'secondary', 'tertiary', 'trunk'],
      ],
      layout: {
        'line-cap': 'butt',
        'line-join': 'miter',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsla(0, 0%, 20%,0.2)',
        'line-dasharray': [12, 0],
        'line-width': {
          base: 1.3,
          stops: [
            [10, 3],
            [20, 23],
          ],
        },
      },
    },
    {
      id: 'highway_major_inner',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 14,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['in', 'class', 'primary', 'secondary', 'tertiary', 'trunk'],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': '#555555',
        'line-width': {
          base: 1.3,
          stops: [
            [10, 2],
            [20, 20],
          ],
        },
        'line-opacity': 0.2,
      },
    },
    {
      id: 'highway_major_subtle',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 11,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['in', 'class', 'primary', 'secondary', 'tertiary', 'trunk'],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: { 'line-color': '#b0b0b0', 'line-opacity': 0.2, 'line-width': 2 },
    },
    {
      id: 'highway_motorway_casing',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 11,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        [
          'all',
          ['!in', 'brunnel', 'bridge', 'tunnel'],
          ['==', 'class', 'motorway'],
        ],
      ],
      layout: {
        'line-cap': 'butt',
        'line-join': 'miter',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsla(0, 0%, 20%,0.4)',
        'line-dasharray': [2, 0],
        'line-opacity': 1,
        'line-width': {
          base: 1.4,
          stops: [
            [5.8, 0],
            [6, 3],
            [20, 40],
          ],
        },
      },
    },
    {
      id: 'highway_motorway_inner',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 6,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        [
          'all',
          ['!in', 'brunnel', 'bridge', 'tunnel'],
          ['==', 'class', 'motorway'],
        ],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': {
          base: 1,
          stops: [
            [5.8, 'hsla(210, 25%, 30%, 0.4)'],
            [6, 'hsl(224, 20%, 29%)'],
          ],
        },
        'line-width': {
          base: 1.4,
          stops: [
            [4, 2],
            [6, 1.3],
            [20, 30],
          ],
        },
      },
    },
    {
      id: 'highway_motorway_subtle',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['==', 'class', 'motorway'],
      ],
      layout: {
        'line-cap': 'round',
        'line-join': 'round',
        visibility: 'visible',
      },
      paint: {
        'line-color': 'hsla(210, 12%, 73%, 0.4)',
        'line-width': {
          base: 1.4,
          stops: [
            [4, 2],
            [6, 1.3],
          ],
        },
      },
    },
    {
      id: 'railway_transit',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 16,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'class', 'transit'], ['!in', 'brunnel', 'tunnel']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: { 'line-color': 'hsl(207, 70%, 47%)', 'line-width': 3 },
    },
    {
      id: 'railway_transit_dashline',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 16,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'class', 'transit'], ['!in', 'brunnel', 'tunnel']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: {
        'line-color': 'hsl(135, 34%, 74%)',
        'line-dasharray': [3, 3],
        'line-width': 2,
      },
    },
    {
      id: 'railway_service',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 16,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'class', 'rail'], ['has', 'service']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: { 'line-color': 'hsl(207, 70%, 47%)', 'line-width': 3 },
    },
    {
      id: 'railway_service_dashline',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 16,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['==', 'class', 'rail'], ['has', 'service']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: {
        'line-color': 'hsl(135, 40%, 75%)',
        'line-dasharray': [3, 3],
        'line-width': 2,
      },
    },
    {
      id: 'railway',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 13,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['!has', 'service'], ['==', 'class', 'rail']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: {
        'line-color': 'hsla(210, 20%, 30%,.6)',
        'line-width': {
          base: 1.3,
          stops: [
            [16, 3],
            [20, 7],
          ],
        },
      },
    },
    {
      id: 'railway_dashline',
      type: 'line',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation',
      minzoom: 14,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['all', ['!has', 'service'], ['==', 'class', 'rail']],
      ],
      layout: { 'line-join': 'round', visibility: 'visible' },
      paint: {
        'line-color': 'hsla(146, 40%, 75%,0.6)',
        'line-dasharray': [3, 3],
        'line-width': {
          base: 1.3,
          stops: [
            [16, 1.5],
            [20, 6],
          ],
        },
      },
    },
    {
      //2个
      id: 'highway_name_other',
      type: 'symbol',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation_name',
      minzoom: 5,
      filter: [
        'all',
        ['!=', 'class', 'motorway'],
        ['==', '$type', 'LineString'],
      ],
      layout: {
        'symbol-placement': 'line',
        'symbol-spacing': 350,
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-max-angle': 30,
        'text-pitch-alignment': 'viewport',
        'text-rotation-alignment': 'map',
        'text-size': 12,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'rgba(121, 214, 255, .6)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(0, 0%, 0%, 0.6)',
        'text-halo-width': 1,
        'text-opacity': 1,
        'text-translate': [0, 0],
      },
    },
    {
      id: 'highway_ref',
      type: 'symbol',
      metadata: { 'mapbox:group': 'b6371a3f2f5a9932464fa3867530a2e5' },
      source: 'openmaptiles',
      'source-layer': 'transportation_name',
      minzoom: 5,
      filter: [
        'all',
        ['==', '$type', 'LineString'],
        ['==', 'class', 'motorway'],
      ],
      layout: {
        'symbol-placement': 'line',
        'symbol-spacing': 350,
        'text-field': '{ref}',
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-pitch-alignment': 'viewport',
        'text-rotation-alignment': 'viewport',
        'text-size': 10,
        visibility: 'none',
      },
      paint: {
        'text-color': 'hsl(210, 20%, 30%)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsl(0, 0%, 49%)',
        'text-halo-width': 1,
        'text-opacity': 1,
        'text-translate': [0, 2],
      },
    },
    // {//3个
    //   "id": "boundary_state",
    //   "type": "line",
    //   "metadata": { "mapbox:group": "a14c9607bc7954ba1df7205bf660433f" },
    //   "source": "openmaptiles",
    //   "source-layer": "boundary",
    //   "filter": ["==", "admin_level", 4],
    //   "layout": {
    //     "line-cap": "round",
    //     "line-join": "round",
    //     "visibility": "visible"
    //   },
    //   "paint": {
    //     "line-blur": 0.4,
    //     "line-color": "hsla(207, 70%, 47%, 1)",
    //     "line-dasharray": [2, 2],
    //     "line-opacity": 1,
    //     "line-width": { "base": 1.3, "stops": [[3, 1], [22, 15]] }
    //   }
    // },
    // {
    //   "id": "boundary_country_z0-4",
    //   "type": "line",
    //   "metadata": { "mapbox:group": "a14c9607bc7954ba1df7205bf660433f" },
    //   "source": "openmaptiles",
    //   "source-layer": "boundary",
    //   "maxzoom": 5,
    //   "filter": ["all", ["==", "admin_level", 2], ["!has", "claimed_by"]],
    //   "layout": { "line-cap": "round", "line-join": "round" },
    //   "paint": {
    //     "line-blur": { "base": 1, "stops": [[0, 0.4], [22, 4]] },
    //     "line-color": "hsl(210, 20%, 25%)",
    //     "line-opacity": 0.56,
    //     "line-width": { "base": 1.1, "stops": [[3, 1], [22, 20]] }
    //   }
    // },
    // {
    //   "id": "boundary_country_z5-",
    //   "type": "line",
    //   "metadata": { "mapbox:group": "a14c9607bc7954ba1df7205bf660433f" },
    //   "source": "openmaptiles",
    //   "source-layer": "boundary",
    //   "maxzoom": 5,
    //   "filter": ["==", "admin_level", 2],
    //   "layout": { "line-cap": "round", "line-join": "round" },
    //   "paint": {
    //     "line-blur": { "base": 1, "stops": [[0, 0.4], [22, 4]] },
    //     "line-color": "hsl(200, 61%, 33%)",
    //     "line-opacity": 0.56,
    //     "line-width": { "base": 1.1, "stops": [[3, 1], [22, 20]] }
    //   }
    // },
    {
      //10个
      id: 'place_other',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      minzoom: 12,
      filter: [
        'all',
        ['in', 'class', 'hamlet', 'neighbourhood', 'isolated_dwelling'],
        ['==', '$type', 'Point'],
      ],
      layout: {
        'text-anchor': 'center',
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-justify': 'center',
        'text-offset': [0.5, 0],
        'text-size': 10,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'hsl(210, 10%, 50%)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(210, 25%, 80%, 0.7)',
        'text-halo-width': 1,
        'text-opacity': 0.6,
      },
    },
    {
      id: 'place_suburb',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      minzoom: 14,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'suburb']],
      layout: {
        'text-anchor': 'center',
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-justify': 'center',
        'text-offset': [0.5, 0],
        'text-size': 10,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'rgba(121, 214, 255, .6)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(210, 25%, 80%, 0.2)',
        'text-halo-width': 1,
      },
    },
    {
      id: 'place_village',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      minzoom: 14,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'village']],
      layout: {
        'icon-size': 0.4,
        'text-anchor': 'left',
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-justify': 'left',
        'text-offset': [0.5, 0.2],
        'text-size': 10,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'icon-opacity': 1,
        'text-color': 'hsla(200, 89%, 65%, 1)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(210, 18%, 73%, 1)',
        'text-halo-width': 1,
      },
    },
    {
      id: 'place_town',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      minzoom: 12,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'town']],
      layout: {
        'icon-image': {
          base: 1,
          stops: [
            [0, 'circle-11'],
            [9, ''],
          ],
        },
        'icon-size': 0.4,
        'text-anchor': {
          base: 1,
          stops: [
            [0, 'left'],
            [8, 'center'],
          ],
        },
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-justify': 'left',
        'text-offset': [0.5, 0.2],
        'text-size': 12,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'icon-opacity': 1,
        'text-color': 'hsla(200, 87%, 74%, 1)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(210, 18%, 73%,0.6)',
        'text-halo-width': 1,
      },
    },
    {
      id: 'place_city_large',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'Point'],
        ['all', ['<=', 'rank', 3], ['==', 'class', 'city']],
      ],
      layout: {
        'icon-size': 0.4,
        'text-anchor': {
          base: 1,
          stops: [
            [0, 'left'],
            [8, 'center'],
          ],
        },
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-justify': 'left',
        'text-offset': [0.5, 0.2],
        'text-size': 14,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'icon-opacity': 1,
        'text-color': 'rgba(121, 214, 255, .6)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(210, 25%, 80%, 1)',
        'text-halo-width': 1,
      },
    },
    {
      id: 'place_state',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 12,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'state']],
      layout: {
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-size': 14,
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'rgba(121, 214, 255, .6)',
        'text-halo-blur': 1,
        'text-halo-color': 'hsla(0, 0%, 100%, 0.2)',
        'text-halo-width': 1,
      },
    },
    {
      id: 'place_country_other',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'Point'],
        ['==', 'class', 'country'],
        ['!has', 'iso_a2'],
      ],
      layout: {
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-size': {
          base: 1,
          stops: [
            [0, 9],
            [6, 11],
          ],
        },
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': {
          base: 1,
          stops: [
            [3, 'hsla(146, 63%, 45%, 1)'],
            [4, 'hsla(207, 70%, 40%, 1)'],
          ],
        },
        'text-halo-color': 'hsla(210, 18%, 73%, 1)',
        'text-halo-width': 1.4,
        'text-opacity': 1,
      },
    },
    {
      id: 'place_country_minor',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 8,
      filter: [
        'all',
        ['==', '$type', 'Point'],
        ['==', 'class', 'country'],
        ['>=', 'rank', 2],
        ['has', 'iso_a2'],
      ],
      layout: {
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-size': {
          base: 1,
          stops: [
            [0, 10],
            [6, 12],
          ],
        },
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'rgba(121, 214, 255, .6)',
        'text-halo-width': 1.4,
        'text-opacity': 1,
      },
    },
    {
      id: 'place_country_major',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 6,
      filter: [
        'all',
        ['==', '$type', 'Point'],
        ['<=', 'rank', 1],
        ['==', 'class', 'country'],
        ['has', 'iso_a2'],
      ],
      layout: {
        'text-anchor': 'center',
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-size': {
          base: 1.4,
          stops: [
            [0, 10],
            [3, 12],
            [4, 14],
          ],
        },
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': {
          base: 1,
          stops: [
            [3, 'hsla(210, 20%, 25%, 1)'],
            [4, 'hsla(280, 39%, 47%, 1)'],
          ],
        },
        'text-halo-color': 'hsla(210, 25%, 80%, 1)',
        'text-halo-width': 1.4,
        'text-opacity': 1,
      },
    },
    {
      id: 'place_continent',
      type: 'symbol',
      metadata: { 'mapbox:group': '101da9f13b64a08fa4b6ac1168e89e5f' },
      source: 'openmaptiles',
      'source-layer': 'place',
      maxzoom: 6,
      filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'continent']],
      layout: {
        'text-anchor': 'center',
        'text-field': ['coalesce', ['get', 'name:zh'], ['get', 'name']],
        'text-font': ['DIN Pro Regular', 'Arial Unicode MS Regular'],
        'text-size': {
          base: 1.4,
          stops: [
            [0, 10],
            [3, 12],
            [4, 14],
          ],
        },
        'text-transform': 'uppercase',
        visibility: 'visible',
      },
      paint: {
        'text-color': 'hsla(210, 20%, 30%, 1)',
        'text-halo-color': 'hsla(210, 25%, 80%, 1)',
        'text-halo-width': 1.4,
        'text-opacity': {
          base: 1,
          stops: [
            [0, 0.6],
            [3, 0],
          ],
        },
      },
    },
    {
      //3个
      id: 'guangzhou',
      type: 'fill',
      source: 'gzsBuildings',
      'source-layer': 'guangzhou',
      minzoom: 14,
      filter: ['==', '$type', 'Polygon'],
      paint: {
        'fill-antialias': false,
        'fill-color': 'hsla(232, 47%, 18%, 0.65)',
        'fill-opacity': 0.25,
      },
    },
    {
      id: 'guangzhou-3d',
      type: 'fill-extrusion',
      source: 'gzsBuildings',
      'source-layer': 'guangzhou',
      minzoom: 14,
      paint: {
        'fill-extrusion-color': [
          'interpolate',
          ['linear'],
          ['get', 'Height'], // 获取建筑物的高度
          0,
          '#0C5873', // 0
          10,
          '#1B4A5D', // 10 米的建筑颜色（浅绿色）
          30,
          '#2DA0AC', // 30 米的建筑颜色（蓝色）
          60,
          '#3FF7FB', // 60 米的建筑颜色（红色）
        ],
        'fill-extrusion-height': {
          property: 'Height',
          type: 'identity',
        },
        'fill-extrusion-opacity': 0.8,
      },
    },
    {
      id: 'building-3d',
      type: 'fill-extrusion',
      source: 'gzsBuildings',
      'source-layer': 'building',
      minzoom: 14,
      filter: ['all', ['!has', 'hide_3d']],
      paint: {
        'fill-extrusion-base': {
          property: 'render_min_height',
          type: 'identity',
        },
        'fill-extrusion-height': {
          property: 'render_height',
          type: 'identity',
        },
        'fill-extrusion-color': [
          'interpolate',
          ['linear'],
          ['get', 'render_height'], // 获取建筑物的高度
          0,
          '#0C5873', // 深蓝绿
          10,
          '#1B4A5D', // 更深蓝灰
          30,
          '#2DA0AC', // 浅蓝绿
          60,
          '#3FF7FB', // 浅青蓝色
        ],
        'fill-extrusion-opacity': {
          stops: [
            [6, 0.9],
            [10, 0.9],
          ],
        },
        'fill-extrusion-translate-anchor': 'viewport',
        'fill-extrusion-translate': [0, 0],
      },
    },
    {
      //dem
      id: 'hillshade-layer',
      type: 'hillshade',
      source: 'dem',
      paint: {
        'hillshade-shadow-color': 'rgba(0, 0, 0, 0.6)', // 深黑色阴影
        'hillshade-highlight-color': 'rgba(255, 255, 255, 0.4)', // 柔和白色高光
        'hillshade-exaggeration': 0.8, // 阴影夸张度
        'hillshade-illumination-direction': 315, // 光源方向（例如，315度表示从西北方向照射）
      },
      layout: { visibility: 'none' },
    },
  ],
};
